<template>
    <div>
        <el-row>
          <el-col :span="5">
            <p class="titles"><span class="hblk"></span>销售金额</p>
            <p class="titles money">￥</p>
            <p class="ddt">{{d.dateAnalysisVOAll2.totalPrice}}</p>
            
          </el-col>
          <el-col :span="5">
            <p class="titles"><span class="hblk"></span>交易笔数</p>
            <p class="titles money"></p>
            <p class="ddt">{{d.dateAnalysisVOAll2.tradeCount}}</p>
          </el-col>
          <el-col :span="5">
            <p class="titles"><span class="hblk"></span>客单价</p>
            <p class="titles money">￥</p>
            <p class="ddt">{{d.dateAnalysisVOAll2.customerPrice}}</p>
          </el-col>
        </el-row>

        <hr>
        <el-row>
          <el-col :span="24">
            <el-col :span="10">

              <el-row>
                <el-col :span="24" class="titles titlefs"><span class="hblk"></span>
                  现金
                </el-col>
              </el-row>
              <el-col :span="6">
                <p class="titles">销售金额</p>
                <p class="titles money">￥</p>
                <p class="ddt">{{d.dateAnalysisVOXJ.totalPrice}}</p>
              </el-col>
              <el-col :span="6">
                <p class="titles">交易笔数</p>
                <p class="titles money"></p>
                <p class="ddt">{{d.dateAnalysisVOXJ.tradeCount}}</p>
              </el-col>
              <el-col :span="12">
                <p class="titles">客单价</p>
                <p class="titles money">￥</p>
                <p class="ddt">{{d.dateAnalysisVOXJ.customerPrice}}</p>
              </el-col>

            </el-col>
            <el-col :span="10">

              <el-row>
                <el-col :span="24" class="titles titlefs"><span class="hblk"></span>
                  第三方支付
                </el-col>
              </el-row>
              <el-col :span="6">
                <p class="titles">销售金额</p>
                <p class="titles money">￥</p>
                <p class="ddt">{{d.dateAnalysisVODSF.totalPrice}}</p>
              </el-col>
              <el-col :span="6">
                <p class="titles">交易笔数</p>
                <p class="titles money"></p>
                <p class="ddt">{{d.dateAnalysisVODSF.tradeCount}}</p>
              </el-col>
              <el-col :span="12">
                <p class="titles">客单价</p>
                <p class="titles money">￥</p>
                <p class="ddt">{{d.dateAnalysisVODSF.customerPrice}}</p>
              </el-col>

            </el-col>
          </el-col>
        </el-row>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    props: ['type','date'],
    data(){
      return{
        d:{
          dateAnalysisVOAll2: {
            totalPrice: 0,
            tradeCount: 0,
            customerPrice: 0
          },
          dateAnalysisVOXJ: {
            totalPrice: 0,
            tradeCount: 0,
            customerPrice: 0
          },
          dateAnalysisVODSF: {
            totalPrice: 0,
            tradeCount: 0,
            customerPrice: 0
          },
        }
      }
    },
    computed:{
      gettime(){
          return this.$store.state.hometime
      },
      getshop(){
          return this.$store.state.TOPshopID
      }
    },
    watch:{
      gettime(v){
        //如果是今天.获取今天的参数,提交
          //如果是历史,获取历史的参数,提交
          //pp为请求数据,pn为请求毛利
        if(this.type=='history'){
            console.log(v)
            var pp=new URLSearchParams()
            pp.append('zdySTime',v[0])
            pp.append('zdyETime',v[1])
            pp.append('type',1)
            var daytemp=this.getOffsetDays(v[0],v[1])
            pp.append('daytemp',daytemp)
            if(this.$store.state.TOPshopID!=-1){
                pp.append('shopId',this.$store.state.TOPshopID)
              }
            this.getData(pp)
        }
      },
      getshop(v){
        //如果是今天.获取今天的参数,提交
          //如果是历史,获取历史的参数,提交
          //pp为请求数据,pn为请求毛利
        var pp=new URLSearchParams()
          if(this.type=='history'){
            if(this.$store.state.hometime.length<1){
              var tim=moment(new Date()).subtract(7, 'days').calendar();
              var qre=moment(tim).format("YYYY-MM-DD HH:mm:ss");
              var now=moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
              pp.append('zdySTime',qre)
              pp.append('zdyETime',now)
              pp.append('daytemp',-6)
            }else{
              pp.append('zdySTime',this.$store.state.hometime[0])
              pp.append('zdyETime',this.$store.state.hometime[1])
              var daytemp=this.getOffsetDays(this.$store.state.hometime[0],this.$store.state.hometime[1])
              if(!this.$store.state.sethometime){
                pp.append('daytemp',daytemp)
              }
            }
          }else{
            var tim=new Date(new Date(new Date().toLocaleDateString()).getTime())//今天早上0.00
            var now=moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
            pp.append('zdySTime',moment(tim).format("YYYY-MM-DD HH:mm:ss"))
            pp.append('zdyETime',now)
            pp.append('daytemp',0)
          }
          pp.append('type',1)
          if(this.$store.state.TOPshopID!=-1&&this.$store.state.TOPshopID){
            pp.append('shopId',this.$store.state.TOPshopID)
          }
          this.getData(pp)
      }
    },
    created(){
      //如果是今天.获取今天的参数,提交
          //如果是历史,获取历史的参数,提交
          //pp为请求数据,pn为请求毛利
      var pp=new URLSearchParams()
      if(this.type=='today'){//今日
        var tim=new Date(new Date(new Date().toLocaleDateString()).getTime())//今天早上0.00
        var now=moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
        pp.append('zdySTime',moment(tim).format("YYYY-MM-DD HH:mm:ss"))
        pp.append('zdyETime',now)
        pp.append('type',1)
        pp.append('daytemp',0)
        if(this.$store.state.TOPshopID&&this.$store.state.TOPshopID!=-1){
          pp.append('shopId',this.$store.state.TOPshopID)
        }
        this.getData(pp)
      }else{//历史
        var tim=moment(new Date()).subtract(7, 'days').calendar();
        var qre=moment(tim).format("YYYY-MM-DD HH:mm:ss");
        var now=moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
        pp.append('zdySTime',qre)
        pp.append('zdyETime',now)
        pp.append('type',1)
        pp.append('daytemp',-6)
        if(this.$store.state.TOPshopID&&this.$store.state.TOPshopID!=-1){
          pp.append('shopId',this.$store.state.TOPshopID)
        }
        this.getData(pp)
      }
    },
    methods:{
      getOffsetDays(time1, time2) {//获取时间差
            var t1=new Date(time1).getTime()
            var t2=new Date(time2).getTime()
            var offsetTime = Math.abs(t1 - t2);
            return 1-Math.floor(offsetTime / (3600 * 24 * 1e3));
        },
        getData(v){//获取数据
            var _this=this
            axios.get('/getXcxDateAnalysisToday.do',{params:v}).then(r=>{
              if(r.data.code==200){
                _this.d=r.data.response.dateAnalysisVO
              }else{
                _this.$message.error(r.data.message)
              }
            })
        }
    }
}
</script>
<style scoped>
.boldfont{
  font-weight: bold;
}
.hblk{
  display: inline-block;
  width: 7px;
  height: 21px;
  background-color: #e8e8e8;
  margin-right: 10px;
  margin-bottom: -4px;
}
.btnmg{
  margin-top:80px;
}
</style>
